
/* Cards */
.callout[data-callout~="cards"] {
    --callout-color: transparent;
    --callout-icon: layout-dashboard;
    --callout-padding: 0;
    --callout-content-padding: 0px;
    --callout-blend-mode: normal;

    --callout-cards-columns: 3;
    --callout-cards-gap: 5px;

    // Columns
    @for $i from 1 through  9 {
        &[data-callout-metadata~="#{$i}"] .callout-content {
            --callout-cards-columns: #{$i};
        }
        // &[data-callout-metadata~="#{$i}"] :is(
        //     .dataview.dataview.table-view-table tbody, 
        //     .callout-content.callout-content
        // ) { grid-template-columns: repeat($i, 1fr); }
    } //grid-template-columns: repeat($i, 1fr);

    box-shadow: none;
    border: 0;
    width: auto;
    
    & > .callout-title { display: none; }
    & > .callout-content {
        display: grid;
        grid-template-columns: repeat(var(--callout-cards-columns), 1fr);
        grid-gap: var(--callout-cards-gap);
        
        border-radius: 0;
        padding-inline-start: 0px;
        padding: 0;
    }
    & p {
        margin-block-start: 0;
        margin-block-end: 0;
        padding: 0;
    }
    
    &:not([data-callout-metadata~='nstr'], [data-callout-metadata~='no-strong']) strong {
        display: block;
        text-align: center;
        margin: auto;
        background-color: var(--outer-bar, var(--background-secondary));
    }
    & br { display: none; }

    
    // Flex
    &[data-callout-metadata~="flex"] > .callout-content, 
    &[data-callout-metadata~="flex"] .dataview.table-view-table tbody
    {
        gap: unset;
        grid-template-columns: none;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        // Sub Callout Sizing
        & .callout {
            flex: 1 1 250px;
            margin: var(--callout-cards-gap);
            //background: transparent;
        }
    }

    // Dataview
    //Table
    &[data-callout-metadata~="dataview"] {
        // Undo General Cards Grid Styling
        --callout-content-padding: 0;
        // --callout-margin: 0;
        // --callout-cards-outline: ;

        & .callout-content {
            display: unset;
            grid-template-columns: unset;
        }
        & br { display: block; }
        

        & .block-language-dataview { padding: 5px; }
        & .dataview.table-view-table {
            display: grid;
            margin-block-start: 0;

            // Undo Table Cell Styling
            & :is(td, tr) {
                border: 0;
                background: transparent;
                padding: 0;
            }
            // Hide Background in dv Table
            & strong { background: transparent; }
        }
        // Restyle Table Headers
        & .table-view-thead {
            & th {
                border: 0;
                background-color: transparent;
            }
            & tr { display: none; }
        }

        // Display cells as grid
        & .dataview.table-view-table tbody {
            display: grid;
            grid-template-columns: repeat(var(--callout-cards-columns), 1fr);
            grid-gap: calc(var(--callout-cards-gap) * 2);

            & tr { 
                display: grid;
                align-content: flex-start;
                margin: 0;
                padding: 10px;
                // flex-direction: column;

                // background-color: var(--aside-bg);
                border: 2px solid var(--outline, var(--background-modifier-box-shadow));
                box-shadow: var(--shadow-ml, var(--input-shadow));
            }
        }
        &[data-callout-metadata~="txt-c"] .dataview td { text-align: center; }


        //Image Sizing
        & img:not(.link-favicon) { 
            width: 100%; 
            object-fit: cover 
        }

        &[data-callout-metadata~="img-micro"]       img { height: var(--micro);     }
        &[data-callout-metadata~="img-tiny"]        img { height: var(--tiny);      }
        &[data-callout-metadata~="img-small"]       img { height: var(--small);     }
        &[data-callout-metadata~="img-small-med"]   img { height: var(--small-med); }
        &[data-callout-metadata~="img-med-small"]   img { height: var(--med-small); }
        &[data-callout-metadata~="img-medium"]      img { height: var(--medium);    }
        &[data-callout-metadata~="img-med-tall"]    img { height: var(--med-tall);  }
        &[data-callout-metadata~="img-tall"]        img { height: var(--tall);      }
    }


    //List
    &[data-callout-metadata~="dvl"] {
        & .callout-content { display: block; }
        & br { display: unset; }

        & .block-language-dataviewjs .dataview-result-list-li,
        & .list-view-ul li {
            padding: 10px;
            background-color: var(--outer-bar, var(--background-secondary));
            box-shadow: var(--shadow-s, var(--input-shadow));
            margin-bottom: 5px;
            
            --list-indent: 0;
        }
        & .dataview.list-view-ul li::before { --bullet: ""; }
        & ul { padding-inline-start: unset; }
    } 

    //List Cards
    &[data-callout-metadata~="list"] {
        --list-indent: 0;

        & > .callout-content { display: block; }
        & ul li::before,
        & .list-collapse-indicator { display: none; }

        & ul { 
            display: grid;
            grid-template-columns: repeat(var(--callout-cards-columns), 1fr);
            grid-gap: 5px;
            
            border-radius: 0;
            padding-inline-start: 0px;
            margin-right: 3px;
            margin-bottom: 5px;
            
            & > li { 
                padding: 5px 10px;
                box-shadow: 
                    0 0 0 2px var(--outline) inset, 
                    var(--shadow-s, var(--input-shadow));
            }
        }
    }


    //Notion Styling
    &[data-callout-metadata~="notion"] {
        // --callout-card-border: 2px solid var(--outline, var(--background-modifier-box-shadow));
        --callout-cards-notion-padding: 10px;
        --callout-cards-notion-shadow: 0 0 5px var(--outline), 0 0 6px var(--outline);
        --callout-cards-notion-radius: var(--radius-s);
        --callout-content-padding: 15px;

        &:is([data-callout-metadata~=round], [data-callout-metadata~=rounded]) {
            --callout-cards-notion-radius: 5px;
        }

        //Dataview Card Styling
        & .dataview.table-view-table tbody {
            & tr {
                padding: 0;
                box-shadow: var(--callout-cards-notion-shadow);
                border: 0;
                border-radius: var(--callout-cards-notion-radius);

                & td > :last-of-type { padding-bottom: 5px; }
                & td > :first-child { padding-top: 5px; }
            }

            //Add Padding if not img element
            & tr td > ul,
            & tr td > span:not(:has(strong, span)) {
                margin-left: var(--callout-cards-notion-padding);
                margin-right: var(--callout-cards-notion-padding);
                display: inline-block;

                // &:not(:has(> *)) { display: inline-block; }
            } 
            

            & tr td:first-of-type strong::after {
                content: "";
                display: block;
                height: 1px;
                background-color: var(--outline);
                margin-top: 5px;
            }

            & strong { margin-top: 5px; margin-bottom: 5px; }
        } 
        
        //Regular Card Styling
        & .block-language-dataview { margin: -25px 0 -25px 0; } //Fix: weird padding caused issue
        & > .callout-content {
            padding: calc(var(--callout-cards-notion-padding) / 2);
            gap: calc(var(--callout-cards-notion-padding) - 3px);
            
            & > p {
                box-shadow: var(--callout-cards-notion-shadow);

                & strong { 
                    background-color: transparent;
                    text-align: unset;
                    padding: 0 var(--callout-cards-notion-padding); 
                }

                //Not image, add padding
                & > :not(img, .internal-embed, strong, br)
                {
                    display: inline-block; //Fix span not indenting text
                    padding-left: var(--callout-cards-notion-padding); 
                    padding-right: var(--callout-cards-notion-padding);
                }
                // & #text + .internal-link { padding-left: 0; }
                
                &, & img { border-radius: var(--callout-cards-notion-radius); }
                
                //First line is image
                & > img:first-child,
                & > .internal-embed:first-child img { margin-bottom: 5px; }
                &:has(> :is(img, .internal-embed):first-child) { padding-bottom: 7px; }
                
                //Last line is image
                & > img:last-child,
                & > .internal-embed:last-child img { margin-top: 5px; }
                &:has(> :is(img, .internal-embed):last-child) { padding-top: 7px; }
            }
        }
    }

}


// Sizing Fixes for Note/Device sizes
.view-content > div:is(.markdown-source-view, .markdown-reading-view) > div
{ container: note / inline-size; }

@container note (max-width: 500px) {
    .callout[data-callout~=cards] .callout-content { --callout-cards-columns: 2; }
}
@container note (max-width: 300px) {
    .callout[data-callout~=cards] .callout-content { --callout-cards-columns: 1; }
}
